<template>
    <d2-container class="warning-header">
        <el-card>
            <el-row :gutter="20">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="选择年">
                        <el-date-picker v-model="value1" type="datetime" placeholder="2018" style="width:140px">
                            <el-input v-model="formInline.year"></el-input>
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="选择周次">
                        <el-select v-model="formInline.week" placeholder="45,2018/11/05 2018/11/11" style="width:240px">
                                <el-option label="44,2018/11/29 2018/11/04" value="0" ></el-option>
                                <el-option label="43,2018/10/22 2018/10/28" value="1"></el-option>
                                <el-option label="42,2018/10/15 2018/10/21" value="2"></el-option>
                                <el-option label="41,2018/10/08 2018/10/14" value="3"></el-option>
                            </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button icon="el-icon-search" size="mini" round @click="onSubmit" type="primary">搜索
                        </el-button>
                        <el-button round type="primary" size="mini" @click="exportCsv" icon="el-icon-download">
                            导出Excel
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-row>
        </el-card>
        <br/>
        <el-card>
            <el-table
                    :data="tableData.data"
                    :stripe="true"
                    :border="true"
                    tooltip-effect="dark">
                <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
                <el-table-column prop="projectName" label="项目名称" align="center">
                </el-table-column>
                <el-table-column prop="sumCount" label="告警总数量" align="center">
                </el-table-column>
                <el-table-column prop="alarmCount1" label="报警数量" align="center">
                </el-table-column>
                <el-table-column prop="alarmCount2" label="故障数量" align="center">
                </el-table-column>
                <el-table-column label="操作" width="180px" align="center">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.$index,scope.row)" size="mini" round
                                   icon="el-icon-edit" align="center">查看
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <template slot="footer">
            <div class="block">
                <el-pagination

                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"
                        layout="prev, pager, next, jumper"
                        :total="tableData.total"
                        class="footer1"
                >
                </el-pagination>
            </div>
        </template>
    </d2-container>
</template>

<script>
    import { getWeekTable} from "../../api/data/projectManagement";

    export default {
        mounted() {
            this.handleWeekTable({},1,null,null);
        },
        data() {
            return {
                currentPage:1,
                value1: '',
                formInline: {
                    year: '',
                    week: '',
                },
                year: [],
                week: [],
                tableData: [],
                columns: [{prop: 'projectName', label: '项目名称'},
                    {prop: 'sumCount', label: '告警总数量'},
                    {prop: 'alarmCount1', label: '报警数量'},
                    {prop: 'alarmCount12', label: '故障数量'},
                ]
            }
        },
        methods: {


            handleCurrentChange (val) {
                console.log(`当前页: ${val}`);
                this.handleWeekTable({},val,this.formInline.year,this.formInline.week);
            },
            handleClick(index, row) {
                console.log(row)

            },
            onSubmit() {
                this.handleWeekTable(this.formInline, 1);
            },
            exportCsv() {
                let _this = this;
                this.$export.csv({
                    columns: _this.columns, data: _this.tableData
                }).then(() => {
                    // ...可选回调
                })
            },
            handleWeekTable(data = {}, pageno,year,week) {
                data = Object.assign(data, {pageno: pageno, pagesize: 10,year:year,week:week});
                getWeekTable(data).then(res => {
                    for (var item of res.data) {
                        item.sumCount = item.alarmCount1 + item.alarmCount2
                    }

                    this.tableData = res;
                })

            },
        }
    }
</script>

<style scoped>

</style>
